<template>
  <div class="about drag">
    <div class="divice">
      <slot></slot>
    </div>
    <div class="options">
      <span
        class="iconfont one item icon-weibiaoti- no-drag"
        @click="optionsHander('minimize')"
      ></span>
      <span
        v-if="!isMaxWindow"
        class="iconfont item icon-3zuidahua-1 no-drag"
        @click="optionsHander('maximize')"
      ></span>
      <span
        v-else
        class="iconfont item icon-3zuidahua-3 no-drag"
        @click="optionsHander('maximize')"
      ></span>
      <span class="iconfont item icon-guanbi no-drag" @click="optionsHander('close')"></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const isMaxWindow = ref(false)

// 点击操作栏
const optionsHander = (type: string) => {
  if (type === 'maximize') {
    isMaxWindow.value = !isMaxWindow.value
  }
  window.electron.ipcRenderer.send('window', type)
}

// 监听主进程传递的窗口大小信息
const windowSize = () => {
  window.electron.ipcRenderer.on('window-resized', (_, { width, height }) => {
    const pageWidth = document.documentElement.clientWidth
    const pageHeight = document.documentElement.clientHeight

    // 判断页面是否充满了整个窗口
    if (pageWidth === width && pageHeight === height) {
      isMaxWindow.value = false
    } else {
      isMaxWindow.value = true
    }
  })
}

onMounted(() => {
  windowSize()
})
</script>

<style scoped lang="scss">
.about {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  position: fixed;
  left: 200px;
  right: 0;
  z-index: 999;
  backdrop-filter: blur(100px);

  .divice {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
  }

  .options {
    width: 100px;
    display: flex;
    justify-content: space-around;
    .item {
      cursor: pointer;
    }
    .item:hover {
      color: #409eff;
    }
  }
}
</style>
